<template>
  <div>
    <div class="filter">
      <div class="filter-header">
        <div v-for="(item,index) in navList" :key="index" class="filter-nav" :class="{navactive: showNum === index}" @click="toggleFilter($event, index)"><span>{{index===1?sortSelect||item:item}}</span><svg data-v-98a11d7e="" viewBox="0 0 72 32"><path data-v-98a11d7e="" d="M36 32l36-32h-72z"></path></svg></div>
      </div>
      <transition name="extend1">
        <div class="filter-extend filter-category" v-show="showNum == 0">
          <div class="filter-scroller">
            <ul class="primary-list">
              <li v-for="(item,index) in filterList" :key="index" @click="switchSecondary(index)"><span>{{item.name}}</span><span class="count">{{item.count}}</span></li>
            </ul>
            <ul class="secondary-list" @click="closeExtend()">
              <li v-for="(item,index) in secondaryList" :key="index" @click="switchShopList(item.id)">
                <img :src="'//fuss10.elemecdn.com/'+item.image_url.substr(0,1)+'/'+item.image_url.substr(1,2)+'/'+item.image_url.substr(3)+'.'+item.image_url.substr(32)+'?imageMogr/format/webp/thumbnail/!80x80r/gravity/Center/crop/80x80/'">
                <span>{{item.name}}</span>
                <span class="count">{{item.count}}</span>
              </li>
            </ul>
          </div>
        </div>
      </transition>
      <transition name="extend2">
      <div class="filter-extend filter-sort" v-show="showNum == 1">
        <ul @click="closeExtend()">
          <li @click="sortShopList($event, 0)">
            <svg viewBox="0 0 33 32" id="default" width="100%" height="100%"><path fill="#3b87c8" d="M13.374 29.064a.94.94 0 0 1-.941-.941V6.476l-7.285 6.899a.942.942 0 0 1-1.299-1.364l8.876-8.424a.94.94 0 0 1 1.59.681v23.855a.94.94 0 0 1-.941.941zM20.904 29.355h-.008a.94.94 0 0 1-.375-.078.943.943 0 0 1-.559-.86V3.944a.94.94 0 1 1 1.882 0v22.287l7.238-6.842a.94.94 0 0 1 1.289 1.366l-8.818 8.338a.943.943 0 0 1-.649.264z"></path></svg>
            <span>智能排序</span>
            <svg class="select-tag" viewBox="0 0 38 32" id="selected" width="100%" height="100%"><path fill="#3190e8" d="M32.291 2.327c.582-.582 1.455-.582 2.036 0l2.036 2.036c.582.582.582 1.455 0 2.036L13.818 29.09c-.582.582-1.455.582-2.036 0L1.455 18.908c-.582-.582-.582-1.455 0-2.036l2.036-2.036c.582-.582 1.455-.582 2.036 0l7.273 7.273L32.291 2.327z"></path></svg>
          </li>
          <li @click="sortShopList($event, 5)">
            <svg viewBox="0 0 32 32" id="distance" width="100%" height="100%"><path fill="#2a9bd3" d="M15.884 31.236l-.042.001a.888.888 0 0 1-.59-.224l-7.91-7.91a7.548 7.548 0 0 1-.498-.471 12.752 12.752 0 0 1-3.747-9.045C3.097 6.523 8.824.796 15.888.796s12.791 5.727 12.791 12.791c0 3.532-1.432 6.73-3.747 9.045-.196.196-.409.391-.613.578l-7.813 7.804a.886.886 0 0 1-.589.223l-.035-.001zm0-28.667C9.818 2.59 4.908 7.513 4.908 13.582c0 3.023 1.218 5.762 3.19 7.752l.461.435 7.316 7.316 7.2-7.2q.284-.249.551-.516a10.977 10.977 0 0 0 3.225-7.787c0-6.066-4.905-10.987-10.965-11.013z"></path><path fill="#2a9bd3" d="M15.884 18.524a5.707 5.707 0 0 1-4.07-1.732l-.001-.001a5.76 5.76 0 1 1 4.119 1.734h-.05zm-2.817-2.942a3.982 3.982 0 1 0 0-5.626c-.726.717-1.175 1.713-1.175 2.813s.449 2.096 1.175 2.813z"></path></svg>
            <span>距离最近</span>
            <svg class="select-tag" viewBox="0 0 38 32" id="selected" width="100%" height="100%"><path fill="#3190e8" d="M32.291 2.327c.582-.582 1.455-.582 2.036 0l2.036 2.036c.582.582.582 1.455 0 2.036L13.818 29.09c-.582.582-1.455.582-2.036 0L1.455 18.908c-.582-.582-.582-1.455 0-2.036l2.036-2.036c.582-.582 1.455-.582 2.036 0l7.273 7.273L32.291 2.327z"></path></svg>
          </li>
          <li @click="sortShopList($event, 6)">
            <svg viewBox="0 0 23 32" id="hot" width="100%" height="100%"><path fill="#f07373" d="M9.859 29.375c-3.489-.771-6.362-3.097-7.187-5.551-.882-2.623-1.029-6.873-.238-9.318l-1.727.037.001.002.001.004.004.01.011.029.038.091c.039.09.086.191.142.3.155.304.349.627.586.955a7.477 7.477 0 0 0 2.711 2.318c.583.153.583.153 1.087-.188.187-.263.187-.263.224-.39.028-.094.041-.176.05-.28.01-.109.016-.238.022-.47.063-2.219.162-3.38.562-4.943a10.05 10.05 0 0 1 .814-2.185c1.433-2.723 4.843-6.053 6.699-7.021l-1.325-.962c-.064.382-.127.992-.131 1.722-.008 1.252.169 2.393.616 3.329.261.547.525.968 1.132 1.862l.23.339c.86 1.281 1.161 1.986 1.069 2.653l-.009.125c.069.517.069.517.781.906.451-.026.451-.026.578-.104.144-.093.144-.093.19-.136.041-.037.079-.077.123-.125.068-.076.153-.178.245-.295.22-.279.458-.615.677-.963.648-1.028 1.045-1.988 1.037-2.845l-.914.009-.706.581c.295.358.809 1.075 1.33 1.936.826 1.363 1.492 2.791 1.898 4.209 1.1 3.845.3 9.288-2.245 11.75a9.652 9.652 0 0 1-1.659 1.29 10.232 10.232 0 0 1-3.471 1.332c-.794.151-1.385.191-2.064.191h-.009a2.75 2.75 0 0 1-.373-.03 6.007 6.007 0 0 1-.585-.115 7.765 7.765 0 0 1-.536-.15l-.578 1.735a9.182 9.182 0 0 0 1.445.341c.221.031.43.048.627.048h.009a12.546 12.546 0 0 0 2.407-.224 12.011 12.011 0 0 0 4.088-1.572c.699-.431 1.358-.94 1.971-1.533 3.098-2.998 4-9.132 2.731-13.567-.455-1.591-1.188-3.161-2.092-4.653-.569-.939-1.134-1.727-1.482-2.15l-1.645-1.998.024 2.588c.004.412-.281 1.1-.756 1.853a9.64 9.64 0 0 1-.569.809 4.528 4.528 0 0 1-.158.195c.028-.027.028-.027.16-.113.122-.075.122-.075.57-.101.71.388.71.388.778.902h-.914l.906.125c.174-1.262-.261-2.281-1.362-3.922l-.235-.347c-.554-.817-.787-1.189-.995-1.624-.306-.642-.444-1.53-.438-2.53a10.566 10.566 0 0 1 .107-1.431L14.44.304l-1.628.85c-2.18 1.138-5.862 4.733-7.471 7.791a11.873 11.873 0 0 0-.967 2.583 19.2 19.2 0 0 0-.511 3.147c-.036.423-.061.839-.079 1.273-.011.281-.019.531-.029.924-.005.191-.01.298-.015.354a.403.403 0 0 1 .019-.077c.027-.099.027-.099.203-.346.492-.332.492-.332 1.112-.157a5.745 5.745 0 0 1-2.54-2.496 3.456 3.456 0 0 1-.093-.197l-.018-.044-.002-.006v.001l.001.002v.002l-.915-2.473-.812 2.51c-.917 2.836-.757 7.485.245 10.463 1.042 3.099 4.442 5.852 8.526 6.754l.395-1.785z"></path></svg>
            <span>销量最高</span>
            <svg class="select-tag" viewBox="0 0 38 32" id="selected" width="100%" height="100%"><path fill="#3190e8" d="M32.291 2.327c.582-.582 1.455-.582 2.036 0l2.036 2.036c.582.582.582 1.455 0 2.036L13.818 29.09c-.582.582-1.455.582-2.036 0L1.455 18.908c-.582-.582-.582-1.455 0-2.036l2.036-2.036c.582-.582 1.455-.582 2.036 0l7.273 7.273L32.291 2.327z"></path></svg>
          </li>
          <li @click="sortShopList($event, 1)">
            <svg viewBox="0 0 32 32" id="price" width="100%" height="100%"><path fill="#e6b61a" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm0-2C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14z"></path><path fill="#e6b61a" d="M23.14 6.06l-5.12 8.65h4.48v1.54h-5.49v2.43h5.49v1.54h-5.49v5.1h-2.02v-5.1H9.53v-1.54h5.46v-2.43H9.53v-1.54h4.45L8.8 6.06h2.24l4.99 8.48 4.93-8.48h2.18z"></path></svg>
            <span>起送价最低</span>
            <svg class="select-tag" viewBox="0 0 38 32" id="selected" width="100%" height="100%"><path fill="#3190e8" d="M32.291 2.327c.582-.582 1.455-.582 2.036 0l2.036 2.036c.582.582.582 1.455 0 2.036L13.818 29.09c-.582.582-1.455.582-2.036 0L1.455 18.908c-.582-.582-.582-1.455 0-2.036l2.036-2.036c.582-.582 1.455-.582 2.036 0l7.273 7.273L32.291 2.327z"></path></svg>
          </li>
          <li @click="sortShopList($event, 2)">
            <svg viewBox="0 0 32 32" id="speed" width="100%" height="100%"><path fill="#37c7b7" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm0-2C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14z"></path><path fill="#37c7b7" d="M15 7v11.002l5.678 4.882 1.304-1.517-5.33-4.583.348.758V6.999h-2z"></path></svg>
            <span>配送速度最快</span>
            <svg class="select-tag" viewBox="0 0 38 32" id="selected" width="100%" height="100%"><path fill="#3190e8" d="M32.291 2.327c.582-.582 1.455-.582 2.036 0l2.036 2.036c.582.582.582 1.455 0 2.036L13.818 29.09c-.582.582-1.455.582-2.036 0L1.455 18.908c-.582-.582-.582-1.455 0-2.036l2.036-2.036c.582-.582 1.455-.582 2.036 0l7.273 7.273L32.291 2.327z"></path></svg>
          </li>
          <li @click="sortShopList($event, 3)">
            <svg viewBox="0 0 33 32" id="rating" width="100%" height="100%"><path fill="#eba53b" d="M27.087 31.84L16.8 25.553 6.504 31.84l2.824-11.727-9.186-7.878 12.019-.941L16.801.16l4.631 11.134 12.019.941-9.158 7.849zM16.8 23.369l7.407 4.527-2.014-8.471 6.588-5.647-8.659-.696L16.8 5.063l-3.341 8.019-8.659.696 6.588 5.647-2.014 8.471z"></path></svg>
            <span>评分最高</span>
            <svg class="select-tag" viewBox="0 0 38 32" id="selected" width="100%" height="100%"><path fill="#3190e8" d="M32.291 2.327c.582-.582 1.455-.582 2.036 0l2.036 2.036c.582.582.582 1.455 0 2.036L13.818 29.09c-.582.582-1.455.582-2.036 0L1.455 18.908c-.582-.582-.582-1.455 0-2.036l2.036-2.036c.582-.582 1.455-.582 2.036 0l7.273 7.273L32.291 2.327z"></path></svg>
          </li>
        </ul>
      </div>
      </transition>
      <transition name="extend3">
      <div class="filter-extend filter-more" v-show="showNum == 2">
        <div class="more-scroller">
          <p>配送方式</p>
          <div>
            <p>商家属性(可多选)</p>
            <div>
              <span @click="toggleSupport($event,8)"><i style="color: rgb(63, 189, 230);">品</i><svg viewBox="0 0 38 32" id="selected" width="100%" height="100%"><path fill="#3190e8" d="M32.291 2.327c.582-.582 1.455-.582 2.036 0l2.036 2.036c.582.582.582 1.455 0 2.036L13.818 29.09c-.582.582-1.455.582-2.036 0L1.455 18.908c-.582-.582-.582-1.455 0-2.036l2.036-2.036c.582-.582 1.455-.582 2.036 0l7.273 7.273L32.291 2.327z"></path></svg>品牌商家</span>
              <span @click="toggleSupport($event,5)"><i style="color: rgb(232, 132, 45);">新</i><svg viewBox="0 0 38 32" id="selected" width="100%" height="100%"><path fill="#3190e8" d="M32.291 2.327c.582-.582 1.455-.582 2.036 0l2.036 2.036c.582.582.582 1.455 0 2.036L13.818 29.09c-.582.582-1.455.582-2.036 0L1.455 18.908c-.582-.582-.582-1.455 0-2.036l2.036-2.036c.582-.582 1.455-.582 2.036 0l7.273 7.273L32.291 2.327z"></path></svg>新店</span>
              <span @click="toggleSupport($event,4)"><i style="color: rgb(153, 153, 153);">票</i><svg viewBox="0 0 38 32" id="selected" width="100%" height="100%"><path fill="#3190e8" d="M32.291 2.327c.582-.582 1.455-.582 2.036 0l2.036 2.036c.582.582.582 1.455 0 2.036L13.818 29.09c-.582.582-1.455.582-2.036 0L1.455 18.908c-.582-.582-.582-1.455 0-2.036l2.036-2.036c.582-.582 1.455-.582 2.036 0l7.273 7.273L32.291 2.327z"></path></svg>开发票</span>
              <span @click="toggleSupport($event,3)"><i style="color: rgb(255, 78, 0);">付</i><svg viewBox="0 0 38 32" id="selected" width="100%" height="100%"><path fill="#3190e8" d="M32.291 2.327c.582-.582 1.455-.582 2.036 0l2.036 2.036c.582.582.582 1.455 0 2.036L13.818 29.09c-.582.582-1.455.582-2.036 0L1.455 18.908c-.582-.582-.582-1.455 0-2.036l2.036-2.036c.582-.582 1.455-.582 2.036 0l7.273 7.273L32.291 2.327z"></path></svg>在线支付</span>
            </div>
          </div>
        </div>
        <div class="more-btn">
          <button @click="clear()">清空</button>
          <button @click="confirm()">确定</button>
        </div>
      </div>
      </transition>
      <div class="filter-mask" v-show="showMask" @click="closeExtend()"></div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'foodmenu',
  data: function () {
    return {
      navList: ['分类', '排序', '筛选'],
      showNum: 3,
      showMask: false,
      sortSelect: '',
      reqId: -100,
      supportIds: []
    }
  },
  computed: {
    ...mapState(['filterList', 'secondaryList'])
  },
  methods: {
    toggleFilter: function (e, index) {
      console.log(e.target)
      if (this.showNum === index) {
        this.showNum = 3
        this.showMask = false
      } else {
        this.showNum = index
        this.showMask = true
      }
    },
    closeExtend: function () {
      this.showNum = 3
      this.showMask = false
    },
    switchShopList: function (id) {
      this.reqId = id
      return this.$store.commit('SWITCHSHOPLIST', this.reqId)
    },
    sortShopList: function (e, sortId) {
      console.log($(e.target).find('span').html())
      this.sortSelect = $(e.target).find('span').html()
      $(e.target).addClass('sort-active').siblings().removeClass('sort-active')
      return this.$store.commit('SORTSHOPLIST', sortId)
    },
    toggleSupport: function (e, id) {
      if (this.supportIds.indexOf(id) !== -1) {
        var index = this.supportIds.indexOf(id)
        this.supportIds.splice(index, 1)
      } else {
        this.supportIds.push(id)
      }
      console.log(this.supportIds)
      $(e.target).toggleClass('span-active')
    },
    clear: function () {
      this.supportIds = []
      $('.more-scroller').find('span').removeClass('span-active')
    },
    confirm: function () {
      this.setSupport(this.supportIds)
      this.closeExtend()
    },
    ...mapMutations({
      getFilterList: 'GETFILTERLIST',
      switchSecondary: 'SWITCHSECONDARY',
      setSupport: 'SETSUPPORT'
    })
  },
  mounted: function () {
    this.getFilterList()
  }
}
</script>

<style lang="scss" >
@import '../../static/hotcss/px2rem.scss';
  .filter{
    position: relative;
    background: #fff;
    .filter-header{
      position: fixed;
      top: px2rem(89);
      z-index: 100;
      width: 100%;
      height: px2rem(80);
      display: flex;
      line-height: px2rem(80);
      border-bottom: 1px solid #ddd;
      background: #fff;
    }
    .filter-nav{
      flex: 1;
      text-align: center;
      font-size: px2rem(26);
      svg{
        width: px2rem(18);
        height: px2rem(8);
        margin-bottom: px2rem(4);
        fill: #999;
        transition: all .3s;
      }
    }
    .navactive{
      color: #3190e8;
      svg{
        transform: rotate(180deg);
      }
    }
    .filter-extend{
      position: fixed;
      width: 100%;
      top: px2rem(168);
      background: #fff;
      z-index: 99;
      .filter-scroller{
        display: flex;
        width: 100%;
        height: px2rem(789);
        font-size: px2rem(24);
        color: #666;
        .primary-list{
          background: #fafafa;
          flex: 2;
          overflow: auto;
          li{
            position: relative;
            line-height: px2rem(90);
            padding: 0 px2rem(10) 0 px2rem(20);
          }
        }
        .secondary-list{
          flex: 3;
          margin-left: px2rem(30);
          padding-right: px2rem(10);
          overflow: auto;
          li{
            position: relative;
            line-height: px2rem(90);
            img{
              width: px2rem(50);
              height: px2rem(50);
              position: relative;
              top: px2rem(14);
              margin-right: px2rem(15);
            }
          }
        }
      }
      .count{
        position: absolute;
        right: px2rem(20);
        line-height: px2rem(28);
        top: 50%;
        margin-top: px2rem(-14);
        border-radius: px2rem(20);
        border: 1px solid #eee;
        background-color: #fff;
        padding: 0 px2rem(10);
        font-size: px2rem(20);
      }
      .more-scroller{
        padding: px2rem(20) px2rem(30);
        font-size: px2rem(24);
        color: #666;
        p{
          margin-bottom: px2rem(30);
        }
        div{
          overflow: hidden;
          span{
            float: left;
            width: 31%;
            margin-right: 2%;
            border: 1px solid #ddd;
            padding: px2rem(17);
            height: px2rem(70);
            margin-bottom: px2rem(15);
            border-radius: px2rem(5);
            box-sizing: border-box;
            position: relative;
            i{
              display: inline-block;
              vertical-align: middle;
              font-style: normal;
              border-width: 1px;
              margin: 0 px2rem(10) 0 px2rem(15);
              border-style: solid;
              width: px2rem(38);
              line-height: px2rem(36);
              text-align: center;
              border-radius: px2rem(8);
              font-size: px2rem(24);
              box-sizing: border-box;
              visibility: visible;
            }
            svg{
              position: absolute;
              left: px2rem(30);
              top: px2rem(4);
              width: px2rem(36);
              visibility: hidden;
            }
          }
          .span-active{
            color: #3190e8;
            border-color: #a2d2ff;
            background-color: #edf5ff;
            i{
              visibility: hidden;
            }
            svg{
              visibility: visible;
            }
          }
        }
      }
      .more-btn{
        display: flex;
        padding: px2rem(10);
        background: #fafafa;
        button{
          font-size: px2rem(36);
          line-height: px2rem(82);
          border-radius: px2rem(6);
          text-align: center;
          flex: 1;
          &:first-child{
            background-color: #fff;
            border: 1px solid #ddd;
            margin-right: px2rem(20);
            color: #333;
          }
          &:last-child{
            color: #fff;
            background-color: #56d176;
            border: 1px solid #56d176;
          }
        }
      }
    }
    .filter-sort{
      ul{
        li{
          position: relative;
          padding-left: px2rem(30);
          line-height: px2rem(100);
          font-size: px2rem(24);
          ::after{
            position: absolute;
            content: "";
            bottom: 0;
            left: px2rem(80);
            right: 0;
            height: 1px;
            background-color: #ddd;
          }
          svg{
            width: px2rem(30);
            height: px2rem(30);
            margin-right: px2rem(20);
            vertical-align: middle;
          }
          .select-tag{
            position: absolute;
            right: px2rem(10);
            top: px2rem(36);
            display: none;
          }
        }
        .sort-active{
          color: #3190e8;
          .select-tag{
            display: block;
          }
        }
      }
    }
    .filter-mask{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      background: rgba(0, 0, 0, .2);
    }
  }
  .extend1-enter-active{
    animation: extend1-in .3s;
  }
  .extend1-leave-active{
    animation: extend1-out .3s;
  }
  .extend2-enter-active{
    animation: extend2-in .3s;
  }
  .extend2-leave-active{
    animation: extend2-out .3s;
  }
  .extend3-enter-active{
    animation: extend3-in .3s;
  }
  .extend3-leave-active{
    animation: extend3-out .3s;
  }

  @keyframes extend1-in {
    0% {
      top: px2rem(-603);
      opacity: .5;
    }
    100% {
      top: px2rem(168);
      opacity: 1;
    }
  }
  @keyframes extend1-out {
    0% {
      top: px2rem(168);
      opacity: 1;
    }
    100% {
      top: px2rem(-603);
      opacity: .5;
    }
  }
  @keyframes extend2-in {
    0% {
      top: px2rem(-508);
      opacity: .5;
    }
    100% {
      top: px2rem(168);
      opacity: 1;
    }
  }
  @keyframes extend2-out {
    0% {
      top: px2rem(168);
      opacity: 1;
    }
    100% {
      top: px2rem(-508);
      opacity: .5;
    }
  }
  @keyframes extend3-in {
    0% {
      top: px2rem(-373);
      opacity: .5;
    }
    100% {
      top: px2rem(168);
      opacity: 1;
    }
  }
  @keyframes extend3-out {
    0% {
      top: px2rem(168);
      opacity: 1;
    }
    100% {
      top: px2rem(-373);
      opacity: .5;
    }
  }
</style>

